<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js循环机制</title>
</head>
<body>
    核心概念
单线程模型：
JavaScript只有一个主线程（调用栈），同一时间只能执行一个任务。
所有同步任务直接在主线程执行，异步任务则通过事件循环调度。
任务队列：
宏任务队列（MacroTask Queue）：包含整体代码块（script）、setTimeout、setInterval、
I/O操作、UI渲染（浏览器）、requestAnimationFrame（浏览器）等。
微任务队列（MicroTask Queue）：包含Promise.then、async/await、MutationObserver
（浏览器）、process.nextTick（Node.js，优先级更高）等。

事件循环的工作流程
执行全局同步代码（视为第一个宏任务）。
检查调用栈是否为空：
若为空，从宏任务队列中取出一个任务执行。
执行当前宏任务：
运行其同步代码，遇到异步操作则注册回调到相应队列。
处理微任务队列：
执行所有微任务，直到微任务队列清空。
进入下一轮循环：
重复步骤2-4，处理下一个宏任务。

关键规则
微任务优先于宏任务：
每执行完一个宏任务后，必须清空微任务队列。
微任务中产生的微任务会被加入当前队列，并在本次循环中执行。
浏览器渲染时机：
在宏任务执行后、微任务执行前，浏览器可能进行渲染（非必须，由浏览器策略决定）。
</body>
</html>